<template>
  <div class="Mine">
    <app-mhead></app-mhead>
    <section class="m-s">
      <ul>
        <li v-for="item in items">
          <p class="art_list_left">
            <router-link v-bind:to="item.balan"><img v-bind:src="item.url"><span>{{item.text}}</span></router-link>
          </p>
          <p class="art_list_right"><span>{{item.msg}}</span><span></span></p>
        </li>
      </ul>
    </section>
    <app-mfooter></app-mfooter>
  </div>
</template>

<script>
  import Mhead from './Mhead'
  import Mfooter from "./Mfooter"
    export default {
        name: "Mine",
      data () {
        return {
          items: [
            {
              balan:"/Balance",
              url: "../../static/img/mine/mine_06.jpg",
              text: "蚂蚁会员",
              msg: "3,765积分"
            }, {
              balan:"/Balance",
              url: "../../static/img/mine/mine_09.jpg",
              text: "账单",
              msg: "  "
            }, {
              balan:"/Balance",
              url: "../../static/img/mine/mine_11.jpg",
              text: "总资产",
              msg: "账户安全险保障中"
            }, {
              balan:"/Balance",
              url: "../../static/img/mine/mine_13.jpg",
              text: "余额",
              msg: "3,943.58元"
            }, {
              balan:"/Balance",
              url: "../../static/img/mine/mine_02.jpg",
              text: "余额宝",
              msg: "  "
            }, {
              balan:"/Balance",
              url: "../../static/img/mine/mine_07.jpg",
              text: "银行卡",
              msg: "  "
            }, {
              balan:"/Balance",
              url: "../../static/img/voucher_center/voucher_center_46.jpg",
              text: "芝麻信用",
              msg: "  "
            }, {
              balan:"/Balance",
              url: "../../static/img/mine/mine_15.jpg",
              text: "保险服务",
              msg: "  "
            }, {
              balan:"/Balance",
              url: "../../static/img/mine/mine_17.jpg",
              text: "花呗",
              msg: "3,943.58元"
            }, {
              balan:"/Balance",
              url: "../../static/img/mine/mine_19.jpg",
              text: "蚂蚁借呗",
              msg: "查看信用借款额度"
            }, {
              balan:"/Balance",
              url: "../../static/img/mine/mine_21.jpg",
              text: "网商银行",
              msg: "  "
            }, {
              balan:"/Balance",
              url: "../../static/img/mine/mine_19.jpg",
              text: "公益",
              msg: "  "
            }, {
              balan:"/Balance",
              url: "../../static/img/mine/mine_08.jpg",
              text: "娱乐宝",
              msg: "  "
            }
          ]
        }
      },
      components:{
        "app-mhead":Mhead,
        "app-mfooter":Mfooter
      }
    }

</script>

<style scoped>

  .m-s{
    padding-bottom: 6rem;
  }
  .m-s ul{
    width: 100%;
  }
  .m-s ul li{
    font-size: 1rem;
    width: 94%;
    padding: 0.5rem 3%;
    margin: 0 auto;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
  }
  .m-s ul li p:nth-child(2) span{
    color: #999;
  }
  .art_list_right span{
    margin-left: 0.5rem;
  }
  .art_list_right span:last-child{
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: url(../../static/img/setting_03.jpg) no-repeat;
    background-size: 100%;
    vertical-align: middle;
  }
  .art_list_left img{
    width: 2.2rem;
    margin-right: 0.5rem;
  }
  .m-s ul li:first-child{
    border-bottom: 1px solid #ddd;
  }
  .m-s ul li:nth-child(2),.m-s ul li:nth-child(7),.m-s ul li:nth-child(12){
    margin-top: 0.6rem;
    border-top: 1px solid #ccc;
  }
  .m-s ul li:nth-child(3) .art_list_right span:first-child{
    color: green;
  }
  .m-s ul li:nth-child(5) .art_list_left img,.m-s ul li:nth-child(6) .art_list_left img{
    height: 1.7rem;
    width: 1.7rem;
    margin-left: 0.3rem;
    margin-right: 0.8rem;
  }

</style>
